// 生产模式webpack配置文件

// 内置模块，用于处理路径
let path = require('path')
// eslint插件，用于语法风格检查
let EslintWebpackPlugin = require('eslint-webpack-plugin')
// html模块，用于打包html文件
let HtmlWebpackPlugin = require('html-webpack-plugin')
// css插件，用于提取css样式到单独文件中
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css插件，用于压缩css文件
let CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// 导入webpack模块
let webpack = require('webpack')

module.exports = {
    // 配置入口(多页面配置)
    entry: {
        // 一个页面对应一个入口文件
        'index': './src/index.js',
        'food-list': './src/food-list.js',
        'food-add': './src/food-add.js',
        'login': './src/login.js',
        'register': './src/register.js'
    },

    // 配置输出的目录和文件名
    output: {
        // 设置打包后的文件的存储路径（绝对路径）
        path: path.join(__dirname,'dist'),
        // 设置打包后的文件名
        filename: './js/[name]-[hash:5].js',
        // 打包之前清除上次打包的内容
        clean: true
    },

    // 加载器配置
    module: {
        rules: [
            // 配置loader
            {
                // 告诉webpack处理到.css文件时，使用use中的loader处理
                test: /\.css$/,
                // 使用use中的loader从右到左执行
                use: [ 
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins:['postcss-preset-env']// 解决大部分css兼容问题
                            }
                        }
                    }
                ]
            },
            {
                // 告诉webpack处理到.less文件时，使用use中的loader处理
                test: /\.less$/,
                // 使用use中的loader从右到左执行
                use: [ 
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins:['postcss-preset-env']// 解决大部分css兼容问题
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            {
                // 告诉webpack处理到jpg jpeg png gif文件时
                test: /\.(jpe?g|png|gif)/,
                // 资源模块类型
                type: 'asset', // 使用file-loader和url-loader
                generator: {
                    // 打包后图片的存储路径和文件名称
                    filename: './imgs/[hash:8][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片编译成base64编码
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                // 匹配到指定的资源时，使用下面的配置处理
                test: /\.(eot|ttf|woff2?|svg)$/,
                // 资源模块类型
                type: 'asset/resource',// 相当于使用了file-loader
                generator: {
                    // 设置打包后的存储目录和文件名
                    filename: './fonts/[hash:5][ext]'
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,// 排除这个目录不使用babel编译
            }
        ]
    },

    // 配置插件
    plugins: [
        // 配置plugin
        // 使用new调用插件，生成一个实例对象，放在数组中
        new webpack.DefinePlugin({
            // __WEBPACK__ENV: '"prod"'
            __WEBPACK__ENV: JSON.stringify('prod')
            // 可以在业务代码中使用__WEBPACK__ENV全局变量
            // 在webpack打包业务代码时，会将__WEBPACK__ENV变量替换为'prod'字符串
        }),
        new webpack.ProvidePlugin({
            // 自动加载jQuery模块
            // 在其他模块中直接使用$或jQuery
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new EslintWebpackPlugin({// ESlint插件配置
            // eslint要检查的目录
            context: path.join(__dirname,'src'),
            // eslint无需检查的目录
            // exclude: path.join(__dirname,'src/js/lib')
        }),
        new HtmlWebpackPlugin({// html插件配置
            // 指定 ./public/index.html 该文件作为模板打包
            template: path.join(__dirname,'public/index.html'),
            // 设置打包后html的存储路径(在dist中的路径)和文件名
            filename: './index.html',
            // 当前页面使用入口key名为index的入口资源
            chunks: ['index'],
            // 打包 favicon.ico 图标
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new HtmlWebpackPlugin({// html插件配置
            // 指定 ./public/food-list.html 该文件作为模板打包
            template: path.join(__dirname,'public/food-list.html'),
            // 设置打包后html的存储路径(在dist中的路径)和文件名
            filename: './food-list.html',
            // 当前页面使用入口key名为food-list的入口资源
            chunks: ['food-list'],
            // 打包 favicon.ico 图标
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new HtmlWebpackPlugin({// html插件配置
            // 指定 ./public/food-add.html 该文件作为模板打包
            template: path.join(__dirname,'public/food-add.html'),
            // 设置打包后html的存储路径(在dist中的路径)和文件名
            filename: './food-add.html',
            // 当前页面使用入口key名为food-add的入口资源
            chunks: ['food-add'],
            // 打包 favicon.ico 图标
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new HtmlWebpackPlugin({// html插件配置
            // 指定 ./public/login.html 该文件作为模板打包
            template: path.join(__dirname,'public/login.html'),
            // 设置打包后html的存储路径(在dist中的路径)和文件名
            filename: './login.html',
            // 当前页面使用入口key名为login的入口资源
            chunks: ['login'],
            // 打包 favicon.ico 图标
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new HtmlWebpackPlugin({// html插件配置
            // 指定 ./public/register.html 该文件作为模板打包
            template: path.join(__dirname,'public/register.html'),
            // 设置打包后html的存储路径(在dist中的路径)和文件名
            filename: './register.html',
            // 当前页面使用入口key名为register的入口资源
            chunks: ['register'],
            // 打包 favicon.ico 图标
            favicon: path.join(__dirname,'public/favicon.ico')
        }),
        new MiniCssExtractPlugin({// 提取css
            // 设置打包后css的存储路径(在dist中的路径)和文件名
            filename: './css/[name]-[hash:5].css'
        }),
        new CssMinimizerWebpackPlugin()// 压缩css
    ],

    // 配置模式
    mode: 'production' // 生产模式
}

